<template>
  <footer ref="footerref" class="footer" style="max-width: 900px">
    <div class="row s-row-center">
      <div class="col-md-10 s-mb14 stretch-card grid-margin">
        <div class="smr-10 s-visible-no">
          <img src="/static/chat/assets/images/user.png" class="s-avatar" alt="circle-image" />
        </div>
        <div class="s-card-transparent card-img-holder text-white">
          <div class="card-body s-font-color s-pad-0">
            <!-- <div -->
            <!--   id="topic" -->
            <!--   class="" -->
            <!--   v-if="questionBottomData && questionBottomData.length" -->
            <!-- > -->
            <!--   <div class="s-title">选择以下话题，快速与我对话：</div> -->
            <!--   <div id="question1"> -->
            <!--     <template v-for="item in questionBottomData" :key="item.name"> -->
            <!--       <span class="s-blo" @click="selectQuestion(item)"> -->
            <!--         <div class="height s-p-5"> -->
            <!--           <div> -->
            <!--             <span class=""> -->
            <!--               <div class="height s-p-5"> -->
            <!--                 <div> -->
            <!--                   <span class=""> -->
            <!--                     {{ item.name }} -->
            <!--                   </span> -->
            <!--                 </div> -->
            <!--                 <div class="hover1"></div> -->
            <!--               </div> -->
            <!--             </span> -->
            <!--           </div> -->
            <!--         </div> -->
            <!--       </span> -->
            <!--     </template> -->
            <!--   </div> -->
            <!-- </div> -->
            <!-- 对话框 -->
            <div class="s-rela">
              <div id="temp" class="s-temp s-show-no"></div>
              <textarea v-model="textareaValue" placeholder="请输入问题" class="form-control s-input" rows="2"></textarea>
              <span v-loading="sendmessageloading" @click="sendbtn"
                class="s-send page-title-icon bg-gradient-primary text-white me-2">
                <i class="mdi mdi-send s-send-icon"></i>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </footer>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { questionBottomData } from "@vp/index";
import { storeToRefs } from "pinia";
const textareaValue = ref<string>("");
import { useChatStore } from "@s/chat";
const chat = useChatStore();
const { sendmessageloading, footerref } = storeToRefs(chat);
const sendbtn = async () => {
  if (!textareaValue.value || textareaValue.value.trim() == "") {
    ElMessage({
      type: "warning",
      message: "请输入问题",
    });
    return;
  }
  var value = textareaValue.value.trim();
  await chat.sendMessage(value);
  textareaValue.value = "";
};
const selectQuestion = (item: any) => {
  textareaValue.value = item.name;
};
</script>

<style lang="sass"></style>
